<template>
  <div>
    <div class="page-title" style="width:100%">按岗位分析</div>
    <div class="page-content">
        <el-row>
          <el-form :model="filterQuery">
            <el-col :span="6">
              <el-form-item>
                <treeselect
                v-model="filterQuery.companyCode"
                :multiline="false"
                :options="company"
                placeholder="搜索受检单位"
                filterable
                clearable
                style="width:80%">
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-date-picker
                type="date"
                v-model="filterQuery.startDate"
                placeholder="开始日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 140px">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item
              label="至"
              label-width="100%">
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-date-picker
              type="date"
              v-model="filterQuery.endDate"
              placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width: 140px">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select
                v-model="filterQuery.round"
                placeholder="搜索轮次"
                filterable
                clearable
                style="width: 120px">
                <el-option
                v-for="item in round"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="width: 80px" @click="getSeverityProblem">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="width: 120px" @click="exportTable">导出Excel</el-button>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <div class="table">
          <el-table
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
          >
            <el-table-column
            label="序号"
            type="index"
            header-align="center"
            width="60%"
            >
            </el-table-column>
            <el-table-column
            label="岗位名称"
            prop="problemName"
            header-align="center">
            </el-table-column>
            <el-table-column
            label="问题数量（项）"
            prop="problemNum"
            header-align="center">
            </el-table-column>
            <el-table-column
            label="百分比（%）"
            prop="percentage"
            header-align="center">
            </el-table-column>
            <el-table-column
            type="selection">
            </el-table-column>
          </el-table>
          <el-button type="text" :icon="buttonIcon" @click="displayTable"></el-button>
          </div>
          </el-row>
          <el-row style="height: 20px">
          </el-row>
          <el-row>
              <div id="pieChart" style="width: 100%; height: 400px"></div>
          </el-row>
              <el-row>
              <div id="histogram" style="width: 100%; height: 400px;"></div>
          </el-row>
    </div>
  </div>
</template>

<script>
import { GetCheckRound,
         GetSeverityProblem } from '../../../services/problemSeverityAnalysis'
import { GetCompany } from '../../../services/gettreedata'
import { Pie } from '../Charts'
import { compare,
         SelectionChange } from '../Function'
import HighCharts from 'highcharts'

export default {
  data() {
    return{
      filterQuery: {
        companyCode: '01',
        startDate: '',
        endDate: '',
        round: '',
        fieldName:'WorkingName',
        fieldCode:'0004'
      },
      company: [],
      round:[],
      problem: [],
      tableData: [],
      filterQueryExcel: {},
      excel: [],
      excelData: [],
      charts: '',
      pieData: [],
      legendData: [],
      histogramData: [],
      buttonIcon: "el-icon-caret-bottom",
      isDisplayTable: false,
      unSelectData: []
    }
  },
  mounted(){
    this.getCompany();
    this.getRound();
    this.getSeverityProblem();
    this.drawPie();
    this.drawHistogram();
  },
  methods: {
    getCompany() {
      GetCompany().then((res) => {
        this.company = res.data
        this.getSeverityProblem()
      })
    },
    getRound() {
      GetCheckRound().then((res) => {
        this.round = res.data
      })
    },
    handleSelectionChange(row) {
      this.unSelectData = SelectionChange(row, this.legendData)
    },
    getSeverityProblem() {
      GetSeverityProblem(this.filterQuery).then((res) => {
        var j = 0
        for(var i in res.data.数量统计) {
          this.problem[j] = i 
          j++
        }
        this.legendData = this.problem
        this.histogramData = {
          name: '岗位',
          data: []
        }
        j = 0
        this.problem = this.problem.map(item => {
          this.histogramData.data[j] = res.data.数量统计[item]
          j++
          return {
            problemName: item,
            problemNum: res.data.数量统计[item],
            percentage: res.data.百分比统计[item],
          }
        })
        this.problem.sort(compare)
        this.tableData = this.problem
        if(this.tableData.length > 5) {
          this.tableData = this.tableData.slice(0,5)
        }
        this.pieData = this.problem.map(item => {
          return {
            y: item.problemNum,
            name: item.problemName
          }
        })
        this.pieData.map(item => {
          if(this.unSelectData.length !== 0) {
            this.unSelectData.map(select => {
              if(item.name == select) {
                item.y = 0
              }
            })
          }
        })
        console.log(this.pieData);
        this.drawPie()
        this.drawHistogram()
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    displayTable() {
      if(this.isDisplayTable == false) {
        this.tableData = this.problem
        this.isDisplayTable = !this.isDisplayTable
        this.buttonIcon = "el-icon-caret-top"
      }
      else{
        this.tableData = this.tableData.slice(0,5)
        this.isDisplayTable = !this.isDisplayTable
        this.buttonIcon = "el-icon-caret-bottom"
      }
    },
    exportTable() {
      this.excelData=GetSeverityProblem(this.filterQueryExcel).then(() => {
        this.excelData = this.problem
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');
          const tHeader = ['岗位名称','问题个数（项）','百分比'];
          // 上面设置Excel的表格第一行的标题
          const filterVal = ['problemName','problemNum','percentage'];
          const list = this.excelData;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '岗位excel');
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    drawPie() {
      Pie('pieChart', '按岗位分析', this.pieData)
    },
    drawHistogram() {
      this.charts = HighCharts.chart('histogram', {
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: this.legendData,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '问题个数'
            },
        },
        tooltip: {
          formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                '总量: ' + this.y;
            }
        },
        legend: {
            layout: 'vertical',
            align: "right",
            symbolHeight: 12,
            symbolWidth: 18,
            symbolRadius: 2,
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
                  fontWeight: 'bold',
                  color: '#333',
                  fontSize: '12px'
                }
            }
        },
        credits: {
            enabled: false,
        },
        plotOptions: {
            column: {
              borderWidth: 0
            }
        },
        series: [this.histogramData]
      })
    },
  }
}
</script>

<style>
.table {
  width: 70%;
  margin: auto;
  text-align: center;
}
th.gutter {
  display: table-cell!important;
}
</style>